"use client";

import { useEffect, useState } from "react";
import { getLogoUrl } from "@/lib/utils";
import dynamic from 'next/dynamic';

// 动态导入DashScopeAssistant组件
const DashScopeAssistant = dynamic(() => 
  import('@/components/DashScopeAssistant').then(mod => ({ default: mod.DashScopeAssistant })), 
  { ssr: false, loading: () => null }
);

export function ClientSideContent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    
    // 脚本放在这里不会引起水合错误，因为这个组件已经水合完成后才会执行
    if (typeof document !== 'undefined') {
      // 使用MutationObserver监听属性变化，在变化后立即移除
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === 'attributes' && 
              mutation.attributeName === 'cz-shortcut-listen') {
            document.body.removeAttribute('cz-shortcut-listen');
          }
        });
      });
      
      // 开始观察body元素的属性变化
      observer.observe(document.body, { attributes: true });
      
      // 如果属性已经存在，立即移除
      if (document.body.hasAttribute('cz-shortcut-listen')) {
        document.body.removeAttribute('cz-shortcut-listen');
      }
      
      return () => observer.disconnect();
    }
  }, []);

  // 不要在服务器端渲染
  if (!isMounted) {
    return null;
  }

  return (
    <>
      {/* 助手组件 */}
      <DashScopeAssistant logoUrl={getLogoUrl()} />
    </>
  );
} 